<!--
 * @Author: 武江毅
 * @Date: 2021-08-05 09:04:29
 * @LastEditTime: 2021-08-06 15:59:34
 * @LastEditors: LAPTOP-CC091CC3
 * @Description: 这里是央视新闻的国内页面
 * @FilePath: \xxtx-group-ui\src\views\Guonei.vue
-->

<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>

    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="con1">
        <!-- 轮播图 -->
        <div class="carousel">
          <div class="car1">
            <el-carousel>
              <el-carousel-item v-for="item in carousels" :key="item.id">
                <img :src="item.url" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="car2">
            <ul>
              <li class="article" @click="toArticleHandler1()">
                <!-- v-for="a in articleData.list"
              :key="a.id" -->
                <!-- <h1>{{ a.title }}</h1> -->
                <div class="title">我校举行“两优一先”表彰大会</div>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我校庆祝建党100周年“两优一先”表彰大会暨新党员代表入党宣誓仪式在明向校区学生活动中心举行。大会对近年来在学校实施综合改革、推进“双一流”建设中涌现出来的先进基层党组织、优秀共产党员、优秀党务工作者进行了表彰。
                </p>
              </li>
            </ul>
          </div>
        </div>
        <!--/轮播图 -->
      </div>

      <div class="con2">
        <!-- 文章列表 -->
        <div class="wap">
          <div class="plt">
            <ul v-if="articleData.total > 0">
              <li
                class="article"
                @click="toArticleHandler(a.id)"
                v-for="a in articleData.list"
                :key="a.id"
              >
                <div class="id1">
                  <img :src="a.cover" alt="" width="100%" height="100%" />
                </div>
                <div class="id2">
                  <div class="title">{{ a.title }}</div>
                  <div class="id2_2">
                    <div class="id3-1">
                      <span>{{ a.publishTime | fmtDate }}</span>
                      &nbsp;&nbsp;&nbsp;&nbsp;阅读量：
                      <span>{{ a.readTimes }}</span>
                    </div>
                    <div class="id3-2">
                      <img src="http://39.103.160.49/ku/pic/icon.png" alt="" />
                    </div>
                  </div>
                </div>
                <span style="color: #fff">0</span>
                <div></div>
              </li>
            </ul>

            <div v-else style="text-align: center; color: red; padding: 2em">
              暂无数据
            </div>

            <!-- 分页 -->
            <div class="page">
              <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <!-- /分页 -->
      </div>
      <!-- <div class="btm9" width="100%" height="100%">
      <span id="linechart" width="100%"></span>



      </div> -->

      <!-- /板块 -->
      <!-- <img src="http://yishao.top/ku/pic/btm210806.png" /> -->
    </div>

    <!-- /体部 -->

    <!-- 底部 -->
    <!-- <img src="http://yishao.top/ku/pic/btm210806.png" /> -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import { get } from "../utils/request";
import Header from "./components/Head";
import Footer from "./components/Foot";
export default {
  // 4. 局部组件注册
  components: {
    Header,
    Footer,
  },
  // 1. 数据
  data() {
    return {
      carousels: [],
      categoryArticles: [],
      loading: false,
      category: {},
      param: {
        page: 1,
        pageSize: 5,
      },
      articleData: {
        list: [],
      },
    };
  },
  watch: {
    "$route.query": {
      handler(query) {
        this.category = query;
        this.loadArticles();
      },
      deep: true,
    },
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created() {
    this.loadCarousels();
    this.loadCategoryArticles();
    this.category = this.$route.query;
    this.loadArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods: {
    // 加载轮播图数据
    loadCarousels() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        this.carousels = resp.data;
      });
    },
    // 加载板块数据
    loadCategoryArticles() {
      let url = "/index/article/findCategoryArticles";
      get(url).then((resp) => {
        this.categoryArticles = resp.data;
      });
    },

    toArticleHandler(id) {
      this.$router.push({ path: "/article", query: { id } });
    },
    toArticleHandler1(id) {
      this.$router.push({ path: "/article?id=79" });
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },

    loadArticles() {
      this.loading = true;
      let url = "/index/article/pageQuery";
      this.param.categoryId = this.category.id;
      get(url, this.param)
        .then((resp) => {
          this.articleData = resp.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
// 变量
$color_primary: #028b39;

.home {
  // 内容样式
  .content {
    background-color: #ecf6f2;
    background: #f5f5f5
      url(http://p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1561603549108607/ind01_bg_XUQIU-18886.jpg)
      repeat-x left top;

    .con1 {
      .carousel {
        // width: 50%;
        // height: 50%;
        padding-left: 100px;
        padding-right: 100px;

        .car1 {
          width: 50%;
          height: 300px;
          // border: 1px solid #ccc;
          float: left;
          box-sizing: border-box;
        }

        .car2 {
          width: 50%;
          height: 300px;
          // border: 1px solid #ccc;
          float: left;
          box-sizing: border-box;
          background: url(//p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1561603549108607/text_bg_XUQIU-18886.jpg);
          background-size: 100% 100%;

          .title {
            padding-top: 20px;
            padding-left: 30px;
            font-size: 60px;
          }
          p {
            font-size: 20px;
            padding-left: 15px;
            padding-right: 15px;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .con11 {
      height: 20px;
      width: 100%;
    }
    .con2 {
      .wap {
        width: 85%;
        margin: 0 auto;
        .plt {
          background-color: #fff;
          .id1 {
            width: 25%;
            height: 230px;
            // border: 1px solid rgb(221, 40, 40);
            float: left;
            box-sizing: border-box;
            padding-top: 15px;
            padding-bottom: 5px;
          }
          .id2 {
            width: 75%;
            height: 230px;
            // border: 1px solid #ccc;
            float: left;
            box-sizing: border-box;
            padding-left: 10px;
            padding-top: 80px;
            font-size: 20px;
            // border: 1px solid rgb(221, 40, 40);
            .id3-1 {
              width: 80%;
              float: left;
            }
            .id3-2 {
              width: 20%;
              float: left;
              img {
                width: 80%;
              }
            }

            .title {
              font-size: 30px;
            }
            .id2_2 {
              padding-top: 50px;
              font-size: 15px;
            }
          }
          .page {
            padding: 0.5em 0;
            text-align: center;
          }
        }
      }
    }
  }
 
}
</style>